<template>
  <view style="border-radius: 8px;position: relative;background-color: red;display: inline-block;">
	 <DomVideoPlayer
	    ref="chatVideoPlayer"
		class="chatVideoPlayer"
	    object-fit='cover'
		style="border-radius: 8px;"
	    :controls="controls"
	    :autoplay="autoplay"
		:style="videoStyle"
	    :loop="loop"
		:muted="muted"
	    :src="videoSrc"
	    :is-loading="isLoading"
		@durationchange="onDurationChange"
		@timeupdate="onTimeUpdate"
	  />
	  
	  <span style="position: absolute;bottom: 15rpx;right: 15rpx;z-index: 100;">{{countdown}}</span>
	  <!-- <video :src="videoSrc" :style="videoStyle"></video> -->
  </view>
</template>

<script>
import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
export default {
  props: {
    srckey: {
      type: String,
      required: true
    },
	controls: {
	  type: Boolean,
	  default:false
	},
	autoplay: {
	  type: Boolean,
	  default:true
	},
	muted: {
	  type: Boolean,
	  default:true
	},
	loop: {
	  type: Boolean,
	  default:true
	},
	videoStyle: {
	  type: String | Object,
	  default: 'width: 100%;height: 100%'
	},
  },
  data() {
    return {
	  // randomNum: Math.floor(Math.random() * 100000000),
      videoSrc: '',
	  isLoading:true,
	  fileTpye:'video',
	  uploadType:'chat',
	  currentTime: 0,
	  duration: 0,
	  isload:false
    };
  },
  computed:{
	countdown() {
		const remainingTime = this.duration - this.currentTime;
		return this.formatTime(remainingTime);
	}  
  },
  mounted() {
    // this.loadImage();
	console.log(1111);
	this.createIntersectionObserver();
  },
  methods: {
	formatTime(seconds) {
		const minutes = Math.floor(seconds / 60);
		const secs = Math.floor(seconds % 60);
		return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
	},
    async loadImage() {
		this.isload = true
	   try {
		 const cachedMedia = await mediaCache.loadMedia(this.srckey, this.uploadType, this.fileTpye);
		 if(this.isNetworkUrl(cachedMedia)){
			 this.videoSrc = cachedMedia
		 }else{
			 // 使用plus.io的resolveLocalFileSystemURL方法获取文件的绝对路径
			 plus.io.resolveLocalFileSystemURL(cachedMedia, (entry) => {
				 this.videoSrc = entry.toLocalURL()
			 }, function(e) {});
		 }
	   } catch (error) {}
    },
	isNetworkUrl(url) {
	    const pattern = /^(http|https|ftp):\/\//i;
	    return pattern.test(url);
	},
	// 总时长变化 - 事件
	onDurationChange(e) {
	  this.duration = e
	},
	// 播放时间更新 - 事件
	onTimeUpdate(e) {
	  this.currentTime = e
	},
	createIntersectionObserver() {
	  this.$nextTick(() => {
	    this.$nextTick(() => {
	      const chatVideoPlayer = this.$refs.chatVideoPlayer;
	      this.observer = uni.createIntersectionObserver(this);
	      this.observer.relativeToViewport().observe('.chatVideoPlayer', (res) => {
	        if (res.intersectionRatio > 0) {
	          if (!this.isload) this.loadImage();
	          chatVideoPlayer && chatVideoPlayer.play();
	        } else {
	          chatVideoPlayer && chatVideoPlayer.pause();
	        }
	      });
	    });
	  });
	}
  }
};
</script>

<style scoped lang="scss">
</style>
